<template>
  <admin-layout>
    <div style="display: flex; justify-content: space-between">
      <h1>文章管理</h1>
      <el-button @click="$router.push({ name: 'ArticleCreate' })">创建</el-button>
    </div>
    <el-table :data="userData" style="width: 100%" empty-text="暂无数据" border v-loading="isLoading">
      <el-table-column label="#" prop="id" width="100" align="center" />
      <el-table-column label="标题" prop="title" />
      <el-table-column label="描述" prop="desc" />
      <el-table-column label="文章详情" prop="editor" />
      <el-table-column label="发布者" prop="author" align="center" width="100">
        <template #default="scope">
          <el-tag>{{ scope.row.author }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="130" align="center">
        <template #default="scope">
          <i class="el-icon-time"></i>
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template #default="scope">
          <el-button size="mini" circle icon="el-icon-view" @click="handleShow(scope.row.id)"></el-button>
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.id)"></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row.id)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination background layout="prev, pager, next" :page-count="10" :pager-count="5" :current-page="page"
        @current-change="currentChange" prev-text="上一页" next-text="下一页">
      </el-pagination>
    </div>
  </admin-layout>
</template>
<script>
  import {
    mapState,
    mapActions,
    mapMutations,
  } from "vuex"
  export default {
    data() {
      return {
        isLoading: false
      }
    },
    computed: {
      ...mapState('article', ['userData', 'page'])
    },
    async created() {
      this.isLoading = true
      this.init()
    },
    methods: {
      ...mapActions('article', ['getList', 'delArticle']),
      ...mapMutations('article', ['SET_PAGE']),
      async currentChange(page) {
        // 改变页码
        this.SET_PAGE(page)
        // this.$store.commit('article/SET_PAGE', page)
        // 刷新数据
        this.init()
      },
      async init() {
        try {
          await this.getList()
        } catch (error) {
          this.$message.error('网络请求错误')
        } finally {
          this.isLoading = false
        }
      },
      handleShow(id) {
        // 动态路由跳转
        this.$router.push({
          name: 'ArticleShow',
          params: {
            id
          }
        })
      },
      handleEdit(id) {
        this.$router.push({
          name: 'ArticleUpdate',
          params: {
            id
          }
        })
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await this.delArticle(id)
            await this.init()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } catch (e) {
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },

  }
</script>

<style scoped lang="less">
  .el-button {
    margin-bottom: 20px
  }
</style>